<template>
  <div class="zhiboxiaoshou_fabu">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="tabs_container">
        <div style="margin-left:30px;width:160px;height:52px;text-align:center;line-height:52px" @click="choosetab('one')" :class="activeName === 'one' ? 'tabs_style' : ''">首页设置</div>
        <div style="margin-left:30px;width:160px;height:52px;text-align:center;line-height:52px" @click="choosetab('three')" :class="activeName === 'three' ? 'tabs_style' : ''">联系客服</div>
        <div style="margin-left:40px;width:160px;height:52px;text-align:center;line-height:52px" @click="choosetab('two')" :class="activeName === 'two' ? 'tabs_style' : ''">下单成功页设置</div>
        <div style="margin-left:40px;width:160px;height:52px;text-align:center;line-height:52px" @click="choosetab('four')" :class="activeName === 'four' ? 'tabs_style' : ''">订单查询配置</div>
        </div>
        <div class="zhiboxitong_right">
          <!-- <el-breadcrumb separator="/">

            <el-breadcrumb-item :to="{ path: '/zhiboxitong/xiaochengxu' }">小程序</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/zhiboxitong/xiaochengxu/xcxstorelist',query: {app_id:this.$route.query.app_id,xcxtype:this.$route.query.xcxtype} }">店铺列表</el-breadcrumb-item>
            <el-breadcrumb-item>页面设置</el-breadcrumb-item>
          </el-breadcrumb> -->
            <!-- <el-breadcrumb-item :to="{ path: '/zhiboxitong/zhiboxiaoshou' }">直播销售</el-breadcrumb-item>
            <el-breadcrumb-item>小程序</el-breadcrumb-item> -->
          <div v-show="activeName === 'two'">
          <div class="flex">
            <div class="fleft">
              <!-- <div class="ft">基础设置</div> -->
              <div class="ft">店铺基础设置</div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z"><span class="red">*</span>页面名称</div>
                <div class="r"><el-input v-model="all.title" placeholder="请输入页面名称"></el-input></div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z"><span class="red">*</span>订单来源</div>
                <div class="r"><el-input v-model="all.store_source" placeholder="请输入敢探号的订单来源"></el-input></div>
              </div>
              <!-- <div class="ft" style="font-size: 16px;">联系客服设置</div>
              <div v-if="listty=='tt'" class="flexc" style="margin-bottom: 20px;">
                <div class="z">抖音im客服:</div>
                <div class="r"><el-input v-model="all.imkfnum" placeholder="已配置的im客服号"></el-input></div><el-link style="margin-left: 10px;" @click="openim=true" type="primary">如何配置</el-link>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">联系电话:</div>
                <div class="r"><el-input v-model="all.mobile" placeholder="请输入联系电话"></el-input></div>
              </div>

             
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">其他联系信息:</div>
                <div class="r"><el-input v-model="all.other_contact"  maxlength="100" placeholder="请输入其他联系信息"></el-input></div>
              </div> -->
            </div>
            <!-- <div class="fright">
              <div class="shouji">
                  <div class="shouji_img flexcc" v-if="!all.qrcode">二维码</div>
                  <div class="shouji_img" style="background: #fff; border: 0;" ></div>
                  <div class="shouji_qita" style="font-size: 12px; color:#999;">{{all.other_contact}}</div>
              </div>
            </div> -->
          </div>
          <!-- <div style="height: 10px;width: 100%;background: #eaeaea;margin: 20px 0;"></div> -->
          <div class="flex">

              <div class="fleft">
                <div class="ft" style="font-size: 16px;">下单成功页设置</div>
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">下单成功话术</div>
                  <div class="r"><el-input v-model="all.order_info"  maxlength="100" placeholder="请输入下单成功话术"></el-input></div>
                </div>
                <!-- <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">二维码展示:</div>
                  <div class="r">
                    <chuantu ref="chuantu2" @getimg="getimg2" :imgs="all.order_pic" v-if="relo"></chuantu>
                  </div>
                </div> -->
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">备注说明</div>
                  <div class="r"><el-input v-model="all.order_pic_info"  maxlength="100" placeholder="请输入备注说明"></el-input></div>
                </div>
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">客服联系电话</div>
                  <div class="r"><el-input v-model="all.order_contact" placeholder="请输入客服联系电话"></el-input></div>
                </div>

              </div>
              <div class="fright">
                <div class="shoujim">
                  <div style="background: #eaeaea; padding:10px; ">
                    <div style="background: #fff; border-radius:5px 5px 0 0;"><img src="../../static/img/xd_success.png" style="width: 115px; margin:0px auto; padding:20px 0;"></div>
                    <div style="text-align: center;background: #fff;  font-weight: bold;  padding:0 0 20px 0; font-size: 14px;" v-if="all.order_info">{{all.order_info}}</div>
                    <div style="text-align: center;background: #fff;  font-weight: bold;  padding:0 0 20px 0; font-size: 14px;" v-if="!all.order_info">下单成功</div>
                    <div style="text-align: center;background: #fff;  padding:0 0 20px 0;  border-radius:0 0 5px 5px ;">
                      <el-button type="danger" size="small" round style="background: #fff; color:#F56C6C;">查看订单</el-button>
                    </div>
                  </div>
                  <div style="background: #eaeaea; padding:10px; ">

                    <!-- <div style="background: #fff; border-radius:5px 5px 0 0;" v-if="all.order_pic"><img :src="all.order_pic" style="width: 150px; margin:0px auto; padding:20px 0;"></div> -->
                    <!-- <div style="background: #fff; border-radius:5px 5px 0 0;" class="flexcc" v-if="!all.order_pic">
                      <div class="shouji_img flexcc" style="width: 115px; height:115px;  border-radius:5px; margin: 20px 0; border:1px #ddd dashed;" v-if="!all.order_pic">二维码</div>
                    </div> -->
                    <div style="text-align: center; padding-bottom:10px; background: #fff; font-size: 12px; padding-top: 20px;" v-if="all.order_pic_info">{{all.order_pic_info}}</div>
                    <div style="text-align: center; padding-bottom:10px; background: #fff; font-size: 12px;" v-if="!all.order_pic_info">备注说明</div>
                    <div v-if="all.order_contact" style="text-align: center; font-size: 12px; padding-bottom:20px; background: #fff; border-radius:0 0 5px 5px ; padding-top: 20px;" >客服联系电话:{{all.order_contact}}</div>
                    <div v-if="!all.order_contact" style="text-align: center; font-size: 12px; padding-bottom:20px; background: #fff; border-radius:0 0 5px 5px ;" >客服联系电话:<span style="color:#999">155xxxxxxxx</span></div>

                  </div>


                </div>
                <!-- <div class="shouji2">
                  <div class="shouji_img flexcc" v-if="!all.order_pic">二维码</div>
                  <div class="shouji_img" v-if="all.order_pic"><img :src="all.order_pic"></div>
                </div> -->
              </div>
            </div>
            <div class="up_btn">
              <el-button type="danger" size="medium" @click="choosetab('four')">下一步</el-button>

            </div>

        </div>
        <div v-show="activeName === 'three'">
          <div class="flex">
            <div class="fleft">
         
              <div class="ft" style="font-size: 16px;">联系客服设置</div>
              <!-- <div v-if="listty=='tt'" class="flexc" style="margin-bottom: 20px;">
                <div class="z">抖音im客服:</div>
                <div class="r"><el-input v-model="all.imkfnum" placeholder="已配置的im客服号"></el-input></div><el-link style="margin-left: 10px;" @click="openim=true" type="primary">如何配置</el-link>
              </div> -->
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">联系电话:</div>
                <div class="r"><el-input v-model="all.mobile" placeholder="请输入联系电话"></el-input></div>
              </div>

             
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">其他联系信息:</div>
                <div class="r"><el-input v-model="all.other_contact"  maxlength="100" placeholder="请输入其他联系信息"></el-input></div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">二维码展示:</div>
                  <div class="r">
                    <chuantu ref="chuantu2" @getimg="getimg" :imgs="all.qrcode" v-if="relo"></chuantu>
                  </div>
              </div>
              <div class="up_btn">
                <el-button type="danger" size="medium" @click="choosetab('two')">下一步</el-button>
              </div>
            </div>
            <div class="fright">
              <div class="shouji">
                  <div class="shouji_img flexcc" v-if="!all.qrcode">二维码</div>
                  <div v-else class="shouji_img" style="background: #fff; border: 0;" >
                    <img :src="all.qrcode" alt="" style="margin-left: auto;margin-right: auto;">
                  </div>
                  <div class="shouji_qita" style="font-size: 12px; color:#999;">{{all.other_contact}}</div>
              </div>
            </div>
          </div>
          <!-- <div style="height: 10px;width: 100%;background: #eaeaea;margin: 20px 0;"></div> -->
      
            

        </div>
        <div v-show="activeName === 'four'">
          <div class="flex">
            <div class="fleft">
         
              <!-- <div class="ft" style="font-size: 16px;">联系客服设置</div> -->
              <!-- <div v-if="listty=='tt'" class="flexc" style="margin-bottom: 20px;">
                <div class="z">抖音im客服:</div>
                <div class="r"><el-input v-model="all.imkfnum" placeholder="已配置的im客服号"></el-input></div><el-link style="margin-left: 10px;" @click="openim=true" type="primary">如何配置</el-link>
              </div> -->
              <!-- <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">失败原因展示:</div>
                <div class="r">
                  <el-switch
                    v-model="all.is_fail_reason_display"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </div>
              </div> -->
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">订单状态展示:</div>
                <div class="r">
                  <el-switch
                    v-model="all.is_order_status_display"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </div>
              </div>

             
              <div class="up_btn">
                <el-button type="danger" size="medium" @click="xiayibu">完成</el-button>
              </div>
            </div>
            
          </div>
          <!-- <div style="height: 10px;width: 100%;background: #eaeaea;margin: 20px 0;"></div> -->
      
            

        </div>
           <fabuxin  v-show="activeName === 'one'" :hide="true" @tabCilck="choosetab"/>
          </div>
      </div>
    </div>
    <el-dialog title="根据已有直播页发布页面" :visible.sync="log" :close-on-click-modal="false" :close-on-press-escape="false" width="700px">
      <div class="flex">
        <el-select v-model="tongbuall" placeholder="选择已有的直播页">
         <el-option v-for="item in list" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false">取消</el-button>
        <el-button type="primary" @click="tongbugo">确认</el-button>
      </span>
    </el-dialog>
    <!-- 配置im客服 -->
    <el-dialog
      title="配置im客服"
      :visible.sync="openim"
      width="1200px"
      :before-close="handleClose">
      <img src="../assets/img/im.png" style="width: 100%;" alt="">
    </el-dialog>
  </div>
</template>

<script>

  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  import chuantu from "../components/chuantu.vue";
  import fabuxin from "../zhiboxitong/xiaochengxu_fabu2xin.vue";
  export default {
    components: {
      top,left,chuantu,fabuxin
    },
    name: "zhiboxiaoshou_fabu",
    data() {
      return {
          activeName:"one",
          list:"",
          tongbuall:"",
          log:false,
          input:"",
          all2:{
            img:"",
            app_name:"",
            app_com:"",
            type:"",//	0	是	string	0抖音
            app_id:"",//	ttee8a983771b41cd301	是	string	无
            pay_salt:"",//	mJr72ajtzdCm1aEJZkLXGRVKRvoU7GklXT1KMxop	是	string	无
            notify_token:"",//	luojiweiyenb123	是	string	无
            secret:"",//	400496a168b6b31fe0f9b5aea82f84e5f43c6dd9	是	string	无
          },
          all:{
            app_id:"",
            title:"",//	wq店铺	是	string	无
            mobile:"",//	18056565656	是	string	电话
            imkfnum:"",//	im客服号
            contact:"",//	18056565656	是	string	联系方式
            qrcode:"",//	二维码	是	string	二维码
            order_info:"下单成功",//	下单返回话术	是	string	下单返回话术
            order_pic:"",//	3	是	string	下单返回图片
            order_pic_info:"",//	desc	是	string	下单返回图片描述
            account_id:0,//	0	是	string	无
            other_contact:"",	//0	是	string	其他联系方式
            order_contact:"",	//	是	string	下单后联系方式
            is_fail_reason_display:1,//失败原因
            is_order_status_display:1,//订单状态展示
          },
          all2:{
            qrcode:""
          },
          relo:true,
          listty:'',
          openim:false
      }
    },
    created() {
      if(this.$route.query.app_id){
        this.getxq()
      }
      this.listty = this.$route.query.app_id.slice(0, 2)
      console.log(this.$route.query.app_id.slice(0, 2))
    },
    mounted() {

    },
    methods: {
      choosetab:function(val){
        this.activeName = val
      },
      getimg:function(img){
        this.all.qrcode = img
      },
      getimg2:function(img){
        this.all.order_pic = img
      },
      xiayibu:function(){

        axios.post(`${this.apis}/api/store/make`,this.all)
          .then(response => {
            if(response.data.msg.code == 0){
              // let id = this.$route.query.id ? this.$route.query.id : response.data.data.id
              let name = this.$route.query.app_id
              if(name.startsWith('tt') || name.startsWith('2021004124652654') || name.startsWith('zfb20231215')){
                var url = '/zhiboxitong/xiaochengxu/xiaochengxu_fabu2xin'
              }else{
                var url = '/zhiboxitong/xiaochengxu/xiaochengxu_fabu2'
              }
              let id = this.all.id ? this.all.id : response.data.data.id
               this.$router.push({
                    path:'/zhiboxitong/xiaochengxu/xcxstorelist',
                    query:{
                      app_id:this.$route.query.app_id,
                      xcxtype:this.$route.query.xcxtype
                    }
                  })
              // this.$router.push({
              //   path:url,
              //   query:{
              //     id:id,
              //     app_id:this.$route.query.app_id,
              //     xcxtype:this.$route.query.xcxtype
              //   }
              // })
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      getxq:function(){
        
        axios.get(`${this.apis}/api/store/mini?app_id=${this.$route.query.id}&type=${this.$route.query.type}`)
          .then(response => {
            if(response.data.msg.code == 0){
              if(response.data.data == null){
                this.all = {
                  app_id:this.$route.query.app_id,
                  title:"",//	wq店铺	是	string	无
                  mobile:"",//	18056565656	是	string	电话
                  imkfnum:"",//	im客服号
                  contact:"",//	18056565656	是	string	联系方式
                  qrcode:"",//	二维码	是	string	二维码
                  order_info:"下单成功",//	下单返回话术	是	string	下单返回话术
                  order_pic:"",//	3	是	string	下单返回图片
                  order_pic_info:"",//	desc	是	string	下单返回图片描述
                  account_id:0,//	0	是	string	无
                  other_contact:"",	//0	是	string	其他联系方式
                  order_contact:"",	//	是	string	下单后联系方式
                  is_fail_reason_display:1,//失败原因展示
                  is_order_status_display:1,//订单状态展示
                }
              }else{
                this.all = response.data.data
              }
              console.log('执行了----')
              console.log(response.data.data)
              this.relo = false
              this.$nextTick(()=>{
                this.relo = true
              })
            }else{
              this.$message.error(response.data.msg.info);
            }
          });


      }

    }
  }
</script>

<style scoped lang="less">
.tabs_container{
  display: flex;
  margin: 20px 0;
  cursor: pointer;
}
  .zhiboxiaoshou_fabu {
    color: #333;
    min-height: 100vh;
    /deep/ .el-breadcrumb{ font-size: 16px;}
    ::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 1px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
      background: #eee;
    }
    ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
      border-radius: 10px;
      background: #fff;
    }
    *{ box-sizing: border-box;}
    .zhiboxitong_content{
      height: calc(100vh - 70px);
      .left{width: 210px;background: #FAFAFE;height: 100vh;}
      .right{ width: calc(100vw - 220px);padding-left: 25px;
        .shoujim {
          width: 300px; height: 700px; background: url('https://static.91haoka.cn/gantanhao/shouji3.png');background-size: 300px 700px; padding: 50px 20px;
          position: absolute;
          top: 120px;
        }
        .zhiboxitong_right{
           height: calc(100vh - 100px);padding-left: 40px;
           border-top-left-radius: 30px;
           background: #F8F9FD;
           overflow: auto; 
        }
        .fleft{
          width: 420px; padding-top: 50px;
          .ft{ font-size: 18px;margin-bottom: 30px;font-weight: bold;}
          .z{width: 120px;text-align: right;padding-right: 20px; font-size: 14px;}
          .r{}
        }
        .fright{
          width: 300px; margin-left: 100px; padding-top: 50px;
          .shouji{ width: 300px;height: 700px;background: url('https://static.91haoka.cn/gantanhao/shouji.png'); background-size: 100%; padding-top: 197px;
            .shouji_img{width: 230px;height: 145px; margin: 0 auto;border-radius: 5px;background: #fff;
              img{ width: 115px;height: 115px;}
            }
            .shouji_qita{ margin-top: 160px;margin-left: 42px;width: 210px;}
          }

          .shouji2{ width: 300px;height: 600px;background: url('https://static.91haoka.cn/gantanhao/shouji2.png'); background-size: 100%; padding-top: 342px;
            .shouji_img{width: 120px;height: 120px; border: 1px solid #CBCBCB;margin: 0 auto;border-radius: 5px;background: #eaeaea;
              img{ width: 120px;height: 120px;}
            }
          }
        }
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }
    .tabs_style{
      width:160px;height:52px;background:rgb(247, 44, 80);border:none;color:white;border-radius:30px
    }
    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
  /deep/ .el-input__inner{
  border-radius: 12px;
  border: 0;
}
.up_btn{
  /deep/ .el-button{
     border-radius: 12px;
     width: 160px;
     height: 48px;
     background: #335DFF;
     border: 0;
     margin:30px 0 0 20px;
  }
}
</style>
